.pickerControl {
  --dpc-size-xs: 30px;
  --dpc-size-sm: 36px;
  --dpc-size-md: 42px;
  --dpc-size-lg: 48px;
  --dpc-size-xl: 54px;
  --dpc-size: var(--dpc-size-sm);

  font-size: var(--dpc-fz, var(--mantine-font-size-sm));
  height: var(--dpc-size);
  width: calc((var(--dpc-size) * 7) / 3 + rem(1.5px));
  display: flex;
  justify-content: center;
  align-items: center;
  user-select: none;
  cursor: pointer;
  background-color: transparent;
  color: var(--mantine-color-text);
  opacity: 1;
  border-radius: var(--mantine-radius-default);

  @mixin hover {
    &:where(:not([data-disabled], :disabled)) {
      @mixin where-light {
        background-color: var(--mantine-color-gray-0);
      }

      @mixin where-dark {
        background-color: var(--mantine-color-dark-5);
      }
    }
  }

  &:where(:disabled, [data-disabled]) {
    color: var(--mantine-color-disabled-color);
    cursor: not-allowed;
    opacity: 0.5;
  }

  &:where([data-selected]) {
    background-color: var(--mantine-primary-color-filled);
    color: var(--mantine-primary-color-contrast, var(--mantine-color-white));

    @mixin hover {
      background-color: var(--mantine-primary-color-filled-hover);
    }
  }

  &:where([data-in-range]) {
    background-color: var(--mantine-primary-color-light-hover);
    border-radius: 0;

    @mixin hover {
      background-color: var(--mantine-primary-color-light);
    }
  }

  &:where([data-first-in-range]) {
    border-radius: 0;
    border-start-start-radius: var(--mantine-radius-default);
    border-end-start-radius: var(--mantine-radius-default);
  }

  &:where([data-last-in-range]) {
    border-radius: 0;
    border-end-end-radius: var(--mantine-radius-default);
    border-start-end-radius: var(--mantine-radius-default);
  }

  &:where([data-first-in-range][data-last-in-range]) {
    border-radius: var(--mantine-radius-default);
  }
}
